<template>
    <div>
        <el-row>
            <el-col :span="24">
                <el-text class="mx-1" type="primary">共有{{ list.length }}项，还剩{{ unDo }}项</el-text>
            </el-col>
        </el-row>
        <br>
        <el-row>
            <el-col :span="24">
                <el-button @click="show('all')">全部</el-button>
                <el-button @click="show('done')">已完成</el-button>
                <el-button @click="show('undo')">待完成</el-button>
                <el-button @click="show('clear')">清空任务</el-button>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default{
    props:{list:Array},
    computed:{
        unDo(){
            let count=0
            this.list.map(v=>{
                if(v.state==false){
                    count++
                }
            })
            return count
        }
    },
    methods:{
        show(flag){
            this.$emit('show',flag)
        }
    }
}</script>